import React from 'react';
import {Card, Button, Spin, Icon, Alert} from 'antd';
import './ui.less';
import { LoadingOutlined,HomeOutlined } from '@ant-design/icons';



export default class Loadings extends React.Component {
    render() {
        const  icon = <Icon type="loading"/>;
        return (
            <div>
                <Card title="spin" className="card-wrap">

                    <Spin size="small"/>
                    <Spin style={{margin: '0 20px'}}/>
                    <Spin size="large"/>
                    <Spin indicator={icon}  style={{marginLeft:20}}/>
                    <LoadingOutlined/>
                    <HomeOutlined/>
                </Card>
                <Card title="内容遮罩" className="card-wrap">

                    <Alert
                        message="react"
                        description="欢迎来到react实战课程"
                        type="info"
                    >
                    </Alert>

                    <Spin>
                        <Alert
                            message="react"
                            description="欢迎来到react实战课程"
                            type="success"
                        >
                        </Alert>

                    </Spin>
                    <Spin tip="加载中">
                        <Alert
                            message="react"
                            description="欢迎来到react实战课程"
                            type="warning"
                        >
                        </Alert>

                    </Spin>
                    <Spin tip="加载中" indicator={icon}>
                        <Alert
                            message="react"
                            description="欢迎来到react实战课程"
                            type="warning"
                        >
                        </Alert>

                    </Spin>
                </Card>

            </div>

        );
    }

}
